<template>
	<div class="personalAssistant">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="assistantCont">
			<div class="assistantContTitle">
				<i class="iconfont icon-sousuo"></i>
				<input type="text" placeholder="有问题? 点我搜索">
			</div>
			<div class="assistantKeFu">
				<p>
					<span>你好！</span>
					<span>我是您的私人助理，请</span>
					<span>问有什么可以帮到您的呢？</span>
				</p>
				<p>
					<img src="../../assets/images/mine/img_kefu@2x.png" alt="">
				</p>
			</div>
			<div class="assistantDetail">
				<p class="questionTitle">
					<span>您可能遇到的问题？</span>
					<span>更多</span>
				</p>
				<div class="findHouseQ">
					<div class="findHouseLeft">
						<img src="../../assets/images/mine/icon_zhaofang@2x.png" alt="">
						<span>找房问题</span>
					</div>
					<div class="findHouseRight">
						<p><span>宜居有短租房源吗</span></p>
						<p><span>如何快速找到房？</span></p>
					</div>
				</div>
				<div class="findHouseQ">
					<div class="findHouseLeft">
						<img src="../../assets/images/mine/icon_dingdan@2x.png" alt="">
						<span>订单问题</span>
					</div>
					<div class="findHouseRight">
						<p><span>商城订单能取消吗？</span></p>
						<p><span>我要删除订单？</span></p>
					</div>
				</div>
				<div class="findHouseQ">
					<div class="findHouseLeft">
						<img src="../../assets/images/mine/icon_banjia@2x.png" alt="">
						<span>搬家问题</span>
					</div>
					<div class="findHouseRight">
						<p><span>如何预约宜居搬家？</span></p>
						<p><span>宜居搬家收费标准？</span></p>
					</div>
				</div>
			</div>
			<div class="assistantFooter">
				<ul>
					<li><a href="javascript:;">我的助理</a></li>
					<li><a href="javascript:;">投诉</a></li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'

	export default{
		name:'personalassistant',
		components:{
			NewsHeader,
		},
		data(){
			return{
					dataArr:{
						isInput:false,
						iconArr:[
							{
								iconLeft:"icon-zuojiantou",
								iconRight:""
							}
						],
						placeholder:"我的助理",
						aimUrl:'/layout/mine',
						rightUrl:''
					}
			}
		}
	}
</script>
<style scoped lang="less">
.personalAssistant{
	width: 100%;
	min-height: 1334 / 100rem;
	padding-top: 88 / 100rem;
	background-color: #f2f2f2;
	box-sizing: border-box;
	.assistantCont{
		width: 100%;
		height: 100%;
		.assistantContTitle{
			margin-right: 75 / 100rem;
			margin-left: 75 / 100rem;
			margin-top: 20 / 100rem;
			margin-bottom: 20 / 100rem;
			background-color: #fff;
			border: none;
			border-radius: 8 / 100rem;
			position: relative;
			i{
				font-size: 30 / 100rem;
				position: absolute;
				top:15 / 100rem;
				left:21 / 100rem;
			}
			input{
				width: 600 / 100rem;
				height: 56 / 100rem;
				border: none;
				outline: none;
				border-radius: 8 / 100rem;
				text-indent: 54 / 100rem;
				font-size: 30 / 100rem;
				color: rgba(0, 0, 0, 0.5);
				font-weight: 600;
			}

		}
		.assistantKeFu{
			margin-left: 46 / 100rem;
			margin-right: 46 / 100rem;
			margin-bottom: 40 / 100rem;
			width: 658 / 100rem;
			height:227 / 100rem;
			background-color: #fff;
			border-radius: 8 / 100rem 8 / 100rem 0 0;
			box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 255, 255, 0.3);
			p:nth-child(1){
				float: left;
				margin-left: 52 / 100rem;
				margin-top: 64 / 100rem;
				text-align: left;
				span{
					display: block;
					margin-bottom: 13 / 100rem;
					font-size: 24 / 100rem;
					color: rgba(0, 0, 0, 0.8);
				}
			}
			p:nth-child(2){
				float: right;
				margin-right: 33 / 100rem;
				margin-top: 42 / 100rem;
				img{
					width: 144 / 100rem;
					height: 144 / 100rem;
				}
			}
		}
		.assistantDetail{
			margin-left: 46 / 100rem;
			margin-right: 46 / 100rem;
			width: 658 / 100rem;
			height:538 / 100rem;
			background-color: #fff;
			border-radius: 8 / 100rem;
			box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 255, 255, 0.3);
			.questionTitle{
				border-bottom:2px solid #f2f2f2; 
				overflow: hidden;
				span{
					display: inline-block;
					color: rgba(0, 0, 0, 0.8);
					font-size: 24 / 100rem;
					font-weight: 600;
				}
				span:nth-child(1){
					float: left;
					margin-left: 18 / 100rem;
					margin-top: 30 / 100rem;
					margin-bottom: 28 / 100rem;
				}
				span:nth-child(2){
					float: right;
					margin-right: 14 / 100rem;
					margin-top: 30 / 100rem;
					margin-bottom: 26 / 100rem;
				}
			}
			.findHouseQ{
				.findHouseLeft{
					text-align: center;
					border-right: 2px solid #f2f2f2;
					border-bottom: 2px solid #f2f2f2;
					float: left;
					img{
						display: block;
						width: 84 / 100rem;
						height: 84 / 100rem;
						margin-left: 33 / 100rem;
						margin-right: 33 / 100rem;
						margin-top: 16 / 100rem;
						margin-bottom: 12 / 100rem;
					}
					span{
						display: block;
						margin-bottom: 20 / 100rem;
						font-size: 20 / 100rem;
					}
				}
				.findHouseRight{
					float: left;
					p{
						overflow: hidden;
						width: 503 / 100rem;
						border-bottom: 2px solid #f2f2f2;
						span{
							display: inline-block;
							margin-top: 27 / 100rem;
							margin-bottom: 26 / 100rem;
							margin-left: 23 / 100rem;
							color: rgba(0, 0, 0, 0.8);
							font-size: 24 / 100rem;
						}
					}
				}
			}
		}
		.assistantFooter{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			ul{
				width: 100%;
				display:flex;
				li{
					float: left;
					text-align: center;
					height: 97 / 100rem; 
					flex:1;
					line-height: 97 / 100rem;
					background-color: #ff5555;
					a{
						color: #fff;
						font-size: 30 / 100rem;
						font-weight: 600;
					}
				}
				li:nth-child(2){
					background-color: #c5c3c3;
					a{
						color: rgba(0, 0, 0, 0.8);
					}
				}
			}
		}
	}
}		
</style>